<div *ngIf="isLoading" class="text-center py-5">加载中...</div>
<div *ngIf="!isLoading && transfer">
  <div class="card mb-3">
    <div class="card-body pb-2">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <div>
          <span class="fw-bold fs-5">调拨单号：</span>
          <span class="fs-5">{{ transfer.inventoryTransferNo || transfer.InventoryTransferNo }}</span>
          <i class="fa fa-copy ms-2" style="cursor:pointer;"></i>
        </div>
        <div>
          <button class="btn btn-outline-primary btn-sm" (click)="goToOutOrder()">调出</button>
        </div>
      </div>
      <div class="row mb-2">
        <div class="col-md-3">制单时间：{{ transfer.creationTime | date:'yyyy-MM-dd HH:mm:ss' }}</div>
        <div class="col-md-2">单据状态：<span class="text-success">{{ transfer.status || '通过' }}</span></div>
        <div class="col-md-3">&nbsp;</div>
      </div>
      <div class="row mb-2">
        <div class="col-md-2">调拨类型：{{ transfer.inventoryTransferType }}</div>
        <div class="col-md-3">调拨申请日期：{{ transfer.creationTime | date:'yyyy-MM-dd HH:mm' }}</div>
        <div class="col-md-2">调入仓库：{{ transfer.inventoryTransferIN }}</div>
        <div class="col-md-2">调出仓库：{{ transfer.inventoryTransferOUT }}</div>
        <div class="col-md-3">经办人：{{ transfer.inventoryTransferOperator }}</div>
      </div>
      <div class="row mb-2">
        <div class="col-md-6">备注：{{ transfer.remarks }}</div>
        <div class="col-md-2">
          出库状态：<span class="text-warning">未出库</span> 0/{{ getTotalQuantity() }}
        </div>
        <div class="col-md-2">
          入库状态：<span class="text-warning">未入库</span> 0/{{ getTotalQuantity() }}
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header pb-0 border-bottom-0">
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link" [class.active]="currentTab==='detail'" (click)="currentTab='detail'">调拨明细</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [class.active]="currentTab==='out'" (click)="currentTab='out'">出库记录</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" [class.active]="currentTab==='in'" (click)="currentTab='in'">入库记录</a>
        </li>
      </ul>
    </div>
    <div class="card-body pt-2">
      <ng-container [ngSwitch]="currentTab">
        <ng-container *ngSwitchCase="'detail'">
          <div class="table-responsive">
            <table class="table table-bordered table-hover align-middle">
              <thead class="table-light">
                <tr>
                  <th><input type="checkbox" /></th>
                  <th>序号</th>
                  <th>货品名称</th>
                  <th>货品编号</th>
                  <th>规格型号</th>
                  <th>单位</th>
                  <th>货品类型</th>
                  <th>调出仓当前库存</th>
                  <th>调入仓当前库存</th>
                  <th>调拨数量</th>
                  <th>调拨单价</th>
                  <th>调拨金额</th>
                  <th>出库状态</th>
                </tr>
              </thead>
              <tbody>
                <tr *ngFor="let d of transfer.merchandiseList || transfer.details; let i = index">
                  <td><input type="checkbox" /></td>
                  <td>{{ i + 1 }}</td>
                  <td>{{ d.merchandiseName || d.MerchandiseName }}</td>
                  <td>{{ d.merchandiseNo || d.MerchandiseNo }}</td>
                  <td>{{ d.merchandiseModel || d.MerchandiseModel }}</td>
                  <td>{{ d.merchandiseUnit || d.MerchandiseUnit }}</td>
                  <td>{{ d.merchandiseType || d.MerchandiseType }}</td>
                  <td>{{ d.merchandiseOut || d.MerchandiseOut }}</td>
                  <td>{{ d.merchandiseIN || d.MerchandiseIN }}</td>
                  <td>{{ d.merchandiseNumber || d.MerchandiseNumber }}</td>
                  <td>{{ d.merchandiseINPrice || d.MerchandiseINPrice }}</td>
                  <td>{{ d.merchandisePrice || d.MerchandisePrice }}</td>
                  <td>未出库</td>
                </tr>
              </tbody>
              <tfoot>
                <tr>
                  <td colspan="9" class="text-end">合计：</td>
                  <td>{{ getTotalQuantity() }}</td>
                  <td></td>
                  <td>{{ getTotalAmount() | number:'1.2-2' }}</td>
                  <td></td>
                </tr>
              </tfoot>
            </table>
          </div>
        </ng-container>
        <ng-container *ngSwitchCase="'out'">
          <div>这里是出库记录内容</div>
        </ng-container>
        <ng-container *ngSwitchCase="'in'">
          <div>这里是入库记录内容</div>
        </ng-container>
      </ng-container>
    </div>
  </div>
</div>

<!-- 调拨出库弹窗 -->
<div *ngIf="isOutOrderModalOpen" class="modal show d-block" tabindex="-1" style="background:rgba(0,0,0,0.3);">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">调拨出库</h5>
        <button type="button" class="btn-close" (click)="closeOutOrderModal()"></button>
      </div>
      <div class="modal-body">
        <!-- 基础信息 -->
        <form class="mb-3">
          <div class="row g-3">
            <div class="col-md-3">
              <label class="form-label">出库单号</label>
              <input class="form-control bg-light" [value]="outOrderData?.outStockOrder?.orderNo || '自动生成'" disabled />
            </div>
            <div class="col-md-3">
              <label class="form-label">调拨类型</label>
              <input class="form-control bg-light" [value]="outOrderData?.outStockOrder?.inventoryTransferType" disabled />
            </div>
            <div class="col-md-3">
              <label class="form-label">调拨单号</label>
              <input class="form-control bg-light" [value]="outOrderData?.outStockOrder?.inventoryTransferNo" disabled />
            </div>
            <div class="col-md-3">
              <label class="form-label">调出仓库</label>
              <input class="form-control bg-light" [value]="outOrderData?.outStockOrder?.inventoryTransferOUT" disabled />
            </div>
            <div class="col-md-3">
              <label class="form-label">出库日期 <span class="text-danger">*</span></label>
              <input class="form-control" type="date" [(ngModel)]="outOrderData.outStockOrder.outDateTime" name="outDateTime" />
            </div>
            <div class="col-md-3">
              <label class="form-label">经办人</label>
              <select class="form-select" [(ngModel)]="outOrderData.outStockOrder.inventoryTransferOperator" name="inventoryTransferOperator">
                <option value="">请选择</option>
                <option value="张三">张三</option>
                <option value="李四">李四</option>
                <option value="王五">王五</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label">备注</label>
              <textarea class="form-control" [(ngModel)]="outOrderData.outStockOrder.remarks" name="remarks" rows="2"></textarea>
            </div>
          </div>
        </form>
        <!-- 出库明细表格 -->
        <div class="table-responsive mb-3">
          <table class="table table-bordered table-hover align-middle">
            <thead class="table-light fw-bold">
              <tr>
                <th>序号</th>
                <th>货品名称</th>
                <th>货品编号</th>
                <th>货品类型</th>
                <th>规格型号</th>
                <th>单位</th>
                <th>当前库存</th>
                <th>出库库位</th>
                <th>调拨数量</th>
                <th>本次出库数量</th>
                <th>出库单价</th>
                <th>出库金额</th>
                <th>生产日期</th>
                <th>批次号</th>
                <th>备注</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr *ngFor="let d of outOrderData?.details; let i = index">
                <td>{{i+1}}</td>
                <td>{{d.merchandiseName}}</td>
                <td>{{d.merchandiseNo}}</td>
                <td>{{d.merchandiseType}}</td>
                <td>{{d.merchandiseModel}}</td>
                <td>{{d.merchandiseUnit}}</td>
                <td>{{d.merchandiseOut}}</td>
                <td>
                  <select class="form-select form-select-sm" [(ngModel)]="d.outKuwei" name="outKuwei{{i}}" style="min-width:100px;">
                    <option value="">请选择</option>
                    <option value="库位一">库位一</option>
                    <option value="库位二">库位二</option>
                    <option value="库位三">库位三</option>
                  </select>
                </td>
                <td>{{d.merchandiseNumber}}</td>
                <td>
                  <input class="form-control form-control-sm" type="number" [(ngModel)]="d.outOrderNumber" name="outOrderNumber{{i}}" style="width:90px;" />
                </td>
                <td>
                  <input class="form-control form-control-sm" type="number" [value]="(Number(d.outOrderNumber)||0)*(Number(d.merchandiseINPrice)||0)" name="outOrderPrice{{i}}" style="width:100px;" disabled />
                </td>
                <td>
                  <input class="form-control form-control-sm" [(ngModel)]="d.batchNo" name="batchNo{{i}}" style="width:100px;" />
                </td>
                <td>
                  <input class="form-control form-control-sm" type="date" [(ngModel)]="d.productionDate" name="productionDate{{i}}" style="width:130px;" />
                </td>
                <td>
                  <input class="form-control form-control-sm" [(ngModel)]="d.reamres" name="reamres{{i}}" style="width:120px;" />
                </td>
                <td>
                  <button class="btn btn-sm btn-outline-danger rounded-pill" (click)="removeDetail(i)">移除</button>
                </td>
              </tr>
            </tbody>
            <tfoot>
            </tfoot>
          </table>
        </div>
        <!-- 合计信息 -->
        <div class="d-flex justify-content-end align-items-center mt-2" style="font-weight:500;">
          <span class="me-4">合计：</span>
          <span class="me-4">出库数量：<span style="color:#ff6600;">{{ getTotalCurrentOutNumber() }}</span></span>
          <span>出库金额：<span style="color:#ff6600;">{{ getTotalOutOrderAmount() | number:'1.2-2' }}</span></span>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="closeOutOrderModal()">取消</button>
        <button type="button" class="btn btn-primary" (click)="saveOutOrder()">保存</button>
      </div>
    </div>
  </div>
</div> 